{% load filters %}

{% if form_to_comment.instance.comment %}
<div class="comment_table">
    {% for comment in form_to_comment.instance.comment %}
        {% if comment.internal and perms.ticket.can_view_internal_comments or not comment.internal %}
            <div class="bubble {% if comment.internal %}interne{% else %}public{% endif %}">
                <div class="comment">
                    <h3>
                        {% if comment.internal %}
                            <div class="bubble-icon interne">
                                <img src="{{ MEDIA_URL }}images/sign.png" alt="commentaire_interne" title="commentaire interne" />
                            </div>
                        {% endif %}
                        {% if not comment.internal %}
                            <div class="bubble-icon public">
                                <img src="{{ MEDIA_URL }}images/users.png" alt="commentaire_public" title="commentaire public" />
                            </div>
                        {% endif %}
                        <div class="author">{{ comment.user.first_name }} {{ comment.user.last_name }} <span>({{ comment.user_name }})</span></div>
                        <div class="info">Le {{ comment.submit_date|date:'d/m/Y à H\hi' }}</div>
                        <div class="clear"></div>
                    </h3>
                    <pre>{{ comment.comment|linebreaks|wordwrap:80 }}</pre>
                </div>
            </div>
            <div class="clear"></div>
        {% endif %}
    {% endfor %}
</div>
{% else %}
<p>Aucune réponse.</p>
{% endif %}
{% block comment_form %}
  <fieldset class="block form" style="padding: 0;">
    <legend>Nouvelle réponse</legend>
    <div class="no_print">
        {{ form_to_comment.comment }}
        {% if perms.ticket.can_view_internal_comments %}
        <div dojoType="dijit.Tooltip" connectId="{{ form_to_comment.get_exact_id|interpret:"comment" }}" position="after" id="{{ form_to_comment.get_exact_id|interpret:"internal"}}-tooltip">
            <div style="display: none; width:200px;">
                <img src="{{ MEDIA_URL }}images/oxygen/comment_public.png" alt="commentaire_public" style="width:64px;display:block;float:left;padding-right:10px;" />
                <p>Attention, la réponse sera transmise au client final</p>
            </div>
            <div style="width:200px;">
                <img src="{{ MEDIA_URL }}images/oxygen/comment_internal.png" alt="commentaire_interne" style="width:64px;display:block;float:left;padding-right:10px;" />
                <p>La réponse sera conservée en interne</p>
            </div>
        </div>
        <p>{{ form_to_comment.internal }}<span id="checkbox_internal_comment"> Commentaire <b>Interne</b> (Si cette case est cochée, la réponse ne sera pas transmise au client final)</span></p>
        {% endif %}
    </div>
  </fieldset>
{% endblock comment_form %}

<script type="text/javascript">
<!-- Connexion du checkbox_internal_comment ->
dojo.addOnLoad( function() 
{
    dojo.connect(dojo.byId("checkbox_internal_comment"), "onclick", function() {
        /* check or uncheck the form cb */
        var w = dijit.byId("id_internal");
        w.set("checked", !w.checked);
    });

    var toggleDuration = 400;
    var toggleButton = new dijit.form.ToggleButton({
        showLabel: true,
        checked: true,
        onChange: function(val){
            if (val == true) {
                console.log("value = true");
                dojo.query(".bubble.interne").forEach(function(tr){
                    dojo.fx.combine([
                        dojo.fadeIn({
                            node: tr,
                            duration: toggleDuration
                        }),
                        dojo.fx.wipeIn({
                            node: tr,
                            duration: toggleDuration
                        }),
                    ]).play();
                });
            } else {
                console.log("value = false");
                dojo.query(".bubble.interne").forEach(function(tr){
                    dojo.fx.combine([
                        dojo.fadeOut({
                            node: tr,
                            duration: toggleDuration
                        }),
                        dojo.fx.wipeOut({
                            node: tr,
                            duration: toggleDuration
                        }),
                    ]).play();
                });
            }
        },
        label: "Afficher commentaires internes",
        iconClass: "dijitCheckBoxIcon"
    },
    "showInternalButton");
});
</script>
